<!--
/*
 * @Author: Gary
 * @Date: 2017-09-05 10:58:11
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-06-27 18:05:20
 */
使用方法：
	<pagination :pageData="pageData" @pageChange="changePage"></pagination>
	属性：
		pageData	必传 分页数据
			pageData: {
			  page: 1,
			  total: 100,
			  size: 10
			}
	方法：
		pageChange 必传 子组件传值
			changePage(pageData){
				this.pageData = pageData;
				this.getList();
			}

-->
<template>
  <div class="pagination-wrapper" v-if="pageData.total">
    <el-pagination
      @size-change="changeSize"
      @current-change="changePage"
      :background="true"
      :current-page.sync="pageData.page"
      :page-sizes="[1, 2,10, 20, 50]"
      :page-size="pageData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total">
    </el-pagination>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
  .pagination-wrapper {
    padding: 20px 10px;
    .el-pagination {
      text-align: right;
    }
  }

</style>

<script>
  export default {
    name: 'pagination',
    props: {
      pageData: {
        type: Object
      }
    },
    methods: {
      changePage() {
        this.$emit('pageChange', this.pageData);
      },
      changeSize(pageSize) {
        this.$emit('changeSize', pageSize);
      }
    }
  };
</script>

